<template>
    <maskLayer v-model="visible" center append-to-body>
      <div class="customer_service">
        <div class="customer_title">微信客服二维码</div>
        <div class="customer_img">
            <img :src="kefu_wechat_image" alt="">
        </div>
        <img @click="closeLayer" class="close_img" src="../assets/login/2.png" alt="">
      </div>
    </maskLayer>
  </template>
  
  <script setup name="kefu">
  import maskLayer from "@/components/maskLayer.vue";
  import { post661f3f1d4b57a } from "@/utils/api.js";
  import { ref, toRefs, watch, onMounted } from "vue";
  

  onMounted(() => {
    getCustomer();
  })
  let visible = ref(false);
  function openPopup() {
    visible.value = true;
  }
  // 获取客服微信
  let kefu_wechat_image = ref("");
  function getCustomer() {
    post661f3f1d4b57a({}).then((res) => {
      // console.log(res);
      if (res.code == 1) {
        kefu_wechat_image.value = res.data.kefu_wechat_image;
      }
    }).catch(err => {
        console.log(err);
    })
  }
  function closeLayer() {
    visible.value = false;
  }
  
  defineExpose({
    openPopup,
  });
  </script>
  
  <style lang="scss" scoped>
  .customer_service {
    background: #fff;
    width: 172px;
    height: 185px;
    position: relative;
    text-align: center;
    padding-top: 30px;
    .customer_title {
        text-align: center;
        font-size: 10px;
        font-weight: bold;
    }
    .customer_img {
        width: 100px;
        height: 100px;
        margin: 14px auto 0;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .close_img {
        width: 8px;
        height: 8px;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 1;
        cursor: pointer;
    }
  }
  </style>